<template>
	<view>
		<view class="box">
			<view class="info">
				<image :src="info.img.split(',')[0]" class="info_left"></image>
				<view class="info_right">
					<view class="title_box">
						<view class="title">{{ info.course_name }}</view>
						<view class="status">{{ info.use_status == 1 ? pay_status[info.pay_status] : "已下架" }}</view>
					</view>
					<view class="time_box">
						<view class="tag">报名截止时间</view>
						<view class="time">{{ dateFormat(info.sign_end_time) }}</view>
					</view>
					<view class="teacher">共{{ info.class_num }}课节</view>
					<view class="teacher" style="margin-top: 10rpx">老师:{{ info.teacher_name }}</view>
				</view>
			</view>
			<!-- 支付状态0未支付1已支付/待核销3已核销/待评价4已评价/已完成5已退款6已取消 -->
			<!-- is_start 0未开始 1已开始 -->
			<view class="btns" v-if="(info.is_start == 0 && info.pay_status == 1) || (info.use_status == 2 && info.pay_status == 1)">
				<view class="btn_box">
					<view class="btn3" @click="refound()">申请退款</view>
					<!-- <view class="btn2" :style="{'opacity':info.is_can_hx==0?0.5:''}" @click="openHxm">核销二维码</view> -->
					<!-- is_can_hx是否展示核销码1是0否 -->
				</view>
			</view>
		</view>

		<!-- 课程信息 -->
		<view class="courseDetails">
			<view class="title">课程信息</view>

			<view class="time">
				<view class="text">开课时间</view>
				<view class="time_tag">
					<view>{{ info.course_time.start_day }} 至 {{ info.course_time.end_day }}</view>
					<!-- <view  v-for="(item,index) in info.class_time" :key="index">
						{{dateFormat(item.start_time)}}-{{dateFormat(item.end_time)}}
					</view> -->
				</view>
			</view>
			<view class="time">
				<view class="text">上课时间</view>
				<view class="time_tag">
					<view v-for="(item, index) in info.time_arr" :key="index"> 每周{{ week[item.week] }} {{ timeFormat(item.start_day) }} ~ {{ timeFormat(item.end_day) }} </view>
				</view>
			</view>
			<view class="time">
				<view class="text">上课地点</view>
				<view class="time_tag">
					<image src="@/static/dw1.png"></image>
					<text>{{ info.address }}</text>
				</view>
			</view>
			<view class="time">
				<view class="text">详细地址</view>
				<view class="time_tag">
					<text>{{ info.detail_address }}</text>
				</view>
			</view>
			<!-- <view class="address">
				<view class="text">上课地点</view>
				<view class="address_info">
					<image src="@/static/dw1.png"></image>
					<text>{{info.address}}</text>
				</view>
			</view> -->
			<!--  is_start 0未开始 1已开始 -->
		</view>
		<view class="listbox" v-if="info.pay_status == 1 || info.pay_status == 7">
			<view class="title">
				成员报名信息
				<!-- <view @click="more()">
					<view>全部</view> v-if="index<=openindex?true:false"
					<image src="../../static/xia.png"></image>
				</view> -->
			</view>
			<view class="listitem" v-for="(item, index) in info.class_time" :key="index">
				<view class="family" v-for="(fitem, findex) in item.family" :key="findex">
					<view class="infosbox">
						<view class="leftbox">
							<view class="name">{{ fitem.name }}</view>
							<view>{{ dateFormat(fitem.start_time) }}-{{ dateFormat(fitem.end_time) }}</view>
						</view>
						<view class="rightbox">
							<!-- /family_status状态0待支付1已支付2已核销3已退款4已取消5已评价/已完成 -->
							<!-- 从支付状态0未支付 1已支付，3已取消/退款 -->
							<view v-if="fitem.family_status == 1">未核销</view>
							<view v-if="fitem.family_status == 2">已核销</view>
						</view>
					</view>
					<view class="code" v-if="fitem.qrcode">
						<image :src="baseUrl + fitem.qrcode"></image>
					</view>
					<view class="btns" style="justify-content: center" v-if="fitem.family_status == 1">
						<view class="btn2" @click="hxSelf(fitem)">确认核销</view>
					</view>
					<!-- <view class="codebut" v-if="fitem.family_status==1" @click="refound(fitem)">
						申请售后
					</view> -->
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<!-- <view class="orderDetails">
			<view class="title">订单信息</view>
			<view class="item">
				<view class="item_left">订单号</view>
				<view class="item_right">{{info.order_sn}}<view class="copy" @click="copyText(info.order_sn)">复制</view>
				</view>
			</view>
			<view class="item">
				<view class="item_left">学习学生</view>
				<view class="item_right">
					<view class="studentitem">
						<view v-for="(s,sinex) in info.family" :key="sindex">
							{{s.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item_left">课本费</view>
				<view class="item_right">
					<text v-if="info.pay_type== 2">{{info.pay_score}}</text>
					<text v-if="info.pay_type== 2" class="small">积分</text v-if="info.pay_type== 2">+<text class="small">￥</text>
					{{info.pay_price}}
				</view>
			</view>
			<view class="item">
				<view class="item_left">支付方式</view>
				<view class="item_right">在线支付</view>
			</view>
			<view class="item">
				<view class="item_left">下单时间</view>
				<view class="item_right">{{dateFormat(info.create_time)}}</view>
			</view>
		</view> -->

		<!-- 核销码 -->
		<uni-popup ref="hxm" background-color="#fff">
			<view class="popup_box">
				<view class="title_box">
					<text class="zw"></text>
					<text>核销二维码</text>
					<image src="../../static/off.png" @click="offHxm"></image>
				</view>
				<view class="popup_hxm">
					<!-- <image class="hxm" src="../../static/logo.png"></image> -->
				</view>
				<view class="btns">
					<view class="btn1" @click="offHxm">取消</view>
					<view class="btn2">保存图片</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { baseUrl } from "../../setting"

export default {
	data() {
		return {
			id: "",
			info: {},
			openindex: 5,
			week: ["日", "一", "二", "三", "四", "五", "六", "日"],
			pay_status: ["未支付", "待上课", "已完结", "待评价", "已完成", "已退款", "已取消", "退款中"], //支付状态0未支付1已支付/待核销3已核销/待评价4已评价/已完成5已退款6已取消
			baseUrl,
		}
	},
	onLoad(option) {
		this.id = option.id
		this.getinfo(option.id)
	},
	onShow() {
		this.getinfo(this.id)
	},
	methods: {
		async getinfo(id) {
			await this.$http({
				url: "/api/course/order_detail",
				data: {
					id: id,
				},
			}).then((res) => {
				this.info = res.data
			})
		},
		hxSelf(item) {
			uni.showModal({
				title: "提示",
				content: "确认要核销该课程吗？",
				showCancel: true,
				success: async ({ confirm, cancel }) => {
					if (confirm) {
						try {
							uni.showLoading({
								title: "加载中",
								mask: true,
							})
							await this.$http({
								url: "/api/Course/family_course_hx",
								data: {
									family_id: item.id,
									order_id: this.id,
								},
							})
							uni.hideLoading()
							uni.showToast({
								title: "核销成功",
								icon: "none",
							})
							this.getinfo(this.id)
						} catch {
							uni.hideLoading()
						}
					}
				},
			})
		},
		more() {
			if (this.openindex == 9999) {
				//
				this.openindex = 5
			} else {
				this.openindex = 9999
			}
			if (this.info.class_time.length <= 5) {
				uni.showToast({
					title: "已展示全部",
					icon: "none",
				})
			}
		},
		refound(fitem) {
			this.getinfo(this.id)
			this.toApplyRefund()
			// if(fitem.family_status==1){
			// 	this.toApplyRefund(fitem)
			// }else{
			// 	uni.showToast({
			// 		title:'该二维码已核销',
			// 		icon:'none'
			// 	})
			// }
		},
		// 跳转申请退款
		toApplyRefund(fitem) {
			uni.navigateTo({
				url: "/pages/applyRefund/applyRefund?id=" + this.id + "&type=" + 2, ////1活动2课程3商城
			})
		},
		// 打开核销码弹窗
		openHxm() {
			if (this.info.is_can_hx == 1) {
				//is_can_hx是否展示核销码1是0否
				this.$refs.hxm.open("center")
			}
		},
		// 关闭核销码
		offHxm() {
			this.$refs.hxm.close()
		},
		// 复制订单号
		copyText(text) {
			uni.setClipboardData({
				data: text,
				success: () => {
					uni.showToast({
						title: "复制成功",
					})
				},
				fail: () => {
					uni.showToast({
						title: "复制失败",
						icon: "none",
					})
				},
			})
		},
		dateFormat: function (value) {
			var date = new Date(value * 1000) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var year = date.getFullYear()
			var month = ("0" + (date.getMonth() + 1)).slice(-2)
			var sdate = ("0" + date.getDate()).slice(-2)
			var hour = ("0" + date.getHours()).slice(-2)
			var minute = ("0" + date.getMinutes()).slice(-2)
			var second = ("0" + date.getSeconds()).slice(-2)
			// 拼接
			var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
			// 返回
			return result
		},
		timeFormat: function (value) {
			var date = new Date(value * 1000) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var year = date.getFullYear()
			var month = ("0" + (date.getMonth() + 1)).slice(-2)
			var sdate = ("0" + date.getDate()).slice(-2)
			var hour = ("0" + date.getHours()).slice(-2)
			var minute = ("0" + date.getMinutes()).slice(-2)
			var second = ("0" + date.getSeconds()).slice(-2)
			// 拼接
			var result = hour + ":" + minute //+ ":" + second;
			// 返回
			return result
		},
	},
}
</script>

<style lang="scss" scoped>
.btns {
	width: 690rpx;
	height: 108rpx;
	border-top: 2rpx solid #ececec;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.btn_box {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.btn1 {
		width: 320rpx;
		height: 68rpx;
		border-radius: 36rpx;
		border: 2rpx solid #888888;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn2 {
		width: 320rpx;
		height: 68rpx;
		background: #ff8a9b;
		border-radius: 36rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn3 {
		width: 690rpx;
		height: 68rpx;
		border-radius: 36rpx;
		// border: 2rpx solid #888888;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.box {
	width: 750rpx;
	background: #ffffff;
	border-radius: 10rpx;
	padding: 36rpx 30rpx 0 30rpx;
	box-sizing: border-box;
	margin: 20rpx auto;

	.info {
		display: flex;
		justify-content: space-between;
		gap: 0 26rpx;
		padding-bottom: 30rpx;

		.info_left {
			width: 160rpx;
			height: 160rpx;
			background: #ffffff;
			border-radius: 6rpx;
			flex-shrink: 0;
		}

		.info_right {
			width: 100%;
			display: flex;
			flex-direction: column;

			.title_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.title {
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					line-height: 1em;
				}

				.status {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #ff8a9b;
				}
			}

			.time_box {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				justify-content: space-between;

				.tag {
					padding: 6rpx 6rpx 4rpx 6rpx;
					background: linear-gradient(180deg, #fcbb8c 0%, #ff8158 100%);
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #ffffff;
					line-height: 1em;
					border-radius: 4rpx 8rpx 8rpx 8rpx;
					// margin-right: 18rpx;
				}

				.time {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #555555;
					line-height: 1em;
					// margin-right: 20rpx;
				}

				.class_hour {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #555555;
					line-height: 1em;
				}
			}

			.teacher {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #555555;
				line-height: 1em;
			}
		}
	}

	.btns {
		width: 690rpx;
		height: 108rpx;
		border-top: 2rpx solid #ececec;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.btn_box {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.btn1 {
			width: 320rpx;
			height: 68rpx;
			border-radius: 36rpx;
			border: 2rpx solid #888888;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn2 {
			width: 320rpx;
			height: 68rpx;
			background: #ff8a9b;
			border-radius: 36rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn3 {
			width: 690rpx;
			height: 68rpx;
			border-radius: 36rpx;
			// border: 2rpx solid #888888;
			background: #ff8a9b;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

// 课程信息
.courseDetails {
	width: 750rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx 40rpx;
	box-sizing: border-box;
	// display: flex;
	// flex-direction: column;
	// gap: 52rpx 0;

	.title {
		width: 4em;
		font-size: 40rpx;
		font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
		font-weight: normal;
		color: #ff6178;
		display: inline-block;
		background: linear-gradient(#fff 0%, #fff 80%, #fff6f8 80%, #fff6f8 100%);
	}

	.time {
		display: flex;
		// flex-wrap: wrap;
		align-items: center;
		padding: 20rpx 0;

		.text {
			width: 140rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #666666;
			line-height: 1em;
			margin-right: 10rpx;
		}

		.time_tag {
			width: 530rpx;
			// padding: 12rpx 14rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			line-height: 1em;
			background: #fff9fa;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			// display: flex;
			align-items: center;

			image {
				width: 25rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}

			// margin-left: 20rpx;
		}
	}

	.address {
		display: flex;
		align-items: center;

		.text {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #666666;
			line-height: 1em;
			margin-right: 30rpx;
		}

		image {
			width: 25rpx;
			height: 28rpx;
			margin-right: 8rpx;
		}

		text {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
		}
	}
}

// 订单信息
.orderDetails {
	width: 750rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin-top: 20rpx;
	padding: 40rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 40rpx 0;

	.title {
		width: 4em;
		font-size: 40rpx;
		font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
		font-weight: normal;
		color: #ff6178;
		display: inline-block;
		background: linear-gradient(#fff 0%, #fff 80%, #fff6f8 80%, #fff6f8 100%);
		margin-bottom: 10rpx;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.item_left {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #666666;
		}

		.item_right {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;

			.studentitem {
				display: flex;
				width: 400rpx;
				justify-content: flex-end;

				> view {
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-left: 10rpx;
				}
			}

			.time {
				margin-left: 18rpx;
			}

			.small {
				font-size: 24rpx;
			}

			.copy {
				color: #fe768a;
				margin-left: 18rpx;
			}
		}
	}
}

// 核销码弹框
.popup_box {
	width: 607rpx;
	height: 788rpx;
	background: #ffffff;
	border-radius: 14rpx;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;

	.title_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 128rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		flex-shrink: 0;

		.zw {
			display: block;
			width: 40rpx;
			height: 40rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.popup_hxm {
		width: calc(100% - 138rpx);
		height: 100%;
		padding-top: 48rpx;
		box-sizing: border-box;
		margin: 0 auto;
		border-top: 2rpx solid #eee;
		display: flex;
		justify-content: center;

		.hxm {
			width: 428rpx;
			height: 428rpx;
		}
	}

	.btns {
		height: 140rpx;
		width: 100%;
		padding: 0 58rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.btn1 {
			width: 226rpx;
			height: 68rpx;
			border-radius: 36rpx;
			border: 2rpx solid #888888;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn2 {
			width: 226rpx;
			height: 68rpx;
			border-radius: 36rpx;
			background: #ff8a9b;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

.listbox {
	width: 690rpx;
	background: #ffffff;
	border-radius: 20rpx;
	opacity: 1;
	padding: 0 30rpx;
	margin-top: 24rpx;

	.title {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 40rpx;
		font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
		font-weight: normal;
		color: #ff6178;

		> view {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;

			image {
				width: 18rpx;
				height: 14rpx;
				margin-left: 14rpx;
			}
		}
	}

	.listitem {
		// height: 158rpx;
		padding: 20rpx 0;
		border-bottom: dashed 2rpx #ececec;

		.family {
			.infosbox {
				display: flex;
				// align-items: center;
				justify-content: space-between;

				.leftbox {
					width: 580rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #555555;

					.name {
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #222222;
						-webkit-line-clamp: 1;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 20rpx;
					}
				}

				.rightbox {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
				}
			}

			.code {
				width: 600rpx;
				margin: 0 auto;
				text-align: center;

				image {
					width: 500rpx;
					height: 500rpx;
				}
			}

			.codebut {
				width: 300rpx;
				height: 70rpx;
				text-align: center;
				color: #222;
				border: solid 2rpx #222;
				line-height: 70rpx;
				margin: 0 auto;
				border-radius: 46rpx;
			}
		}

		.btns {
			width: 690rpx;
			height: 108rpx;
			border-top: 2rpx solid #ececec;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btn_box {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.btn1 {
				width: 320rpx;
				height: 68rpx;
				border-radius: 36rpx;
				border: 2rpx solid #888888;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.btn2 {
				width: 320rpx;
				height: 68rpx;
				background: #ff8a9b;
				border-radius: 36rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.btn3 {
				width: 690rpx;
				height: 68rpx;
				border-radius: 36rpx;
				border: 2rpx solid #888888;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}
</style>
